<?php $view->extend('layout.php') ?>

<div class="row marketing">
    <div class="col-lg-12">
       <br />
       <br />
        
        <div id="world-map" style="width: 100%; height:600px" style="border:1px solid black"></div>
          <script>
              
              var paysConcerne={
              <?php foreach ($pays as $p) {?>
              
                    "<?php echo $p->getCode(); ?>": '#f5f5dc',
                              
              <?php } ?>
               }; 
              
              var markers = [ //camp
               <?php foreach ($camps as $c) {?>
              
                    {latLng: [<?php echo $c->getGpsLat();?>,<?php echo $c->getGpsLong();?>], name: '<?php echo $c->getVille();?>',style: {fill: 'grey'}},
                    
              <?php } ?>
              ]

            $(function(){
              $('#world-map').vectorMap({


              backgroundColor:'#dd9c2e',
              zoomMax:16,
              markers:markers,
              markerStyle: {
                    initial: {
                      fill: '#F8E23B',
                      stroke: '#383f47',
                       r:4
                    },
                     hover: {
                       r:6
                     } 
                },
                regionStyle: {
                     initial: {
                        fill: '#000',
                        "fill-opacity": 1,
                        stroke: 'none',
                        "stroke-width": 0,
                        "stroke-opacity": 1
                      },
                      hover: {
                        "fill-opacity": 0.8,
                        cursor: 'pointer'
                      }
                },
              series: {
                    regions: [{
                        attribute: 'fill',
                        values: paysConcerne
                      }]
               },
               onRegionClick:function(event, code) {
                   
                        var map = $('#world-map').vectorMap('get', 'mapObject');
                        var $area   = $('#pays-camps');

                         $.ajax({
                            type: "POST",
                            url: '<?php echo $view['router']->generate('front_ajax_information_pays') ?>',
                            data: { nomPays : map.getRegionName(code) },
                            success: function(data)
                            {
                                if(data.valid)
                                {
                                    $area.fadeOut(function(){
                                        $(this).html(data.html);
                                        /*$("#ajax-reponse-succes").attr('class', 'alert alert-success');
                                        $("#ajax-reponse-succes").show();
                                        $("#ajax-reponse-succes").html( "Score augmenté "+ data.value);*/
                                        $(this).fadeIn();
                                    });

                                }
                            }
                        });
                        $(location).attr('href',"#slide-2");
               },
               onMarkerClick:function(events, index) {
                           
                            var $area   = $('#camp-camps');

                         $.ajax({
                            type: "POST",
                            url: '<?php echo $view['router']->generate('front_ajax_information_camp') ?>',
                            data: { nomCamp : markers[index].name },
                            success: function(data)
                            {
                                if(data.valid)
                                {
                                    $area.fadeOut(function(){
                                        $(this).html(data.html);
                                        /*$("#ajax-reponse-succes").attr('class', 'alert alert-success');
                                        $("#ajax-reponse-succes").show();
                                        $("#ajax-reponse-succes").html( "Score augmenté "+ data.value);*/
                                        $(this).fadeIn();
                                    });

                                }
                            }
                        });
                        $(location).attr('href',"#slide-3");
                            
                            
                           }
                });    
            });
          </script>
    </div>
    

</div>